import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';
import StarRating from './StarRating';

const Skills = () => {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: '-100px' });
  
  // Skills data with proficiency (1-5 stars)
  const skills = [
    { name: 'JavaScript', rating: 5 },
    { name: 'TypeScript', rating: 4 },
    { name: 'React', rating: 4 },
    { name: 'Vue', rating: 3 },
    { name: 'HTML5', rating: 5 },
    { name: 'CSS3', rating: 5 },
    { name: 'Sass', rating: 4 },
    { name: 'ECharts', rating: 3 },
    { name: 'Git', rating: 5 },
    { name: 'Figma', rating: 3 }
  ];
  
  return (
    <motion.section
      id="skills"
      ref={ref}
      initial={{ opacity: 0, x: -50 }}
      animate={isInView ? { opacity: 1, x: 0 } : {}}
      transition={{ duration: 0.8, ease: "easeOut", delay: 0.1 }}
      className="bg-color-card rounded-xl p-6 shadow-lg backdrop-blur-sm border border-gray-800"
    >
      <div className="flex items-center mb-6">
        <div className="w-10 h-10 rounded-full bg-color-accent flex items-center justify-center mr-4 star-glow">
          <i className="fa-solid fa-code text-white"></i>
        </div>
        <h2 className="text-2xl font-bold text-gray-100">技能栈</h2>
      </div>
      
      <div className="border-t border-gray-700 pt-6">
        <div className="grid grid-cols-2 gap-x-4 gap-y-5">
          {skills.map((skill, index) => (
            <motion.div
              key={skill.name}
              initial={{ opacity: 0, y: 10 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5, delay: index * 0.05 }}
              className="flex items-center justify-between"
            >
              <span className="text-gray-300">{skill.name}</span>
              <StarRating rating={skill.rating} />
            </motion.div>
          ))}
        </div>
      </div>
    </motion.section>
  );
};

export default Skills;